{% extends 'template/base.html' %}

{% block head %}
    {{ super() }}
    <title>商品管理</title>
    <style>
        td {
            vertical-align: middle !important;
        }
    </style>
{% endblock %}

{% block body %}

    {% include 'template/admin-header.html' %}


    <div class="container" style="margin-top: 40px">


        <div class="text-left" style="margin-bottom: 10px">
            <form class="form-inline" method="get">
                <input type="text" class="form-control" placeholder="输入商品名" name="k"
                       value="{{ request.args.k | d('', true) }}">
                <button type="submit" class="btn btn-primary">搜索商品</button>
                <a href="{{ url_for('admin.new_product_ep') }}" class="btn btn-success">添加商品</a>
            </form>
        </div>

        {% if request.args.k %}
            <div style="text-align: left;color: #666;font-size: 18px">关于 “ {{ request.args.k }} ” 的商品：</div>
        {% else %}
            <div style="text-align: left;color: #666;font-size: 18px">全部商品：</div>
        {% endif %}

        <table class="table table-bordered table-striped" style="margin-top: 10px">

            <tr>
                <td>#</td>
                <td>名称</td>
                <td>单价</td>
                <td>库存</td>
                <td>上架日期</td>
                <td>单量</td>
                <td>操作</td>

            </tr>

            {% for product in products | sort(attribute='sales', reverse=true) %}

                <tr>
                    <!--列表-->
                    <td>{{ loop.index + (pagination.page - 1) * pagination.per_page }}</td>
                    <td>
                        <span class="pd-name">{{ product.name }}</span>
                        <img src="{{ url_for('static', filename='upload/'+product.img) }}">
                    </td>
                    <style>
                        .pd-name:hover + img {
                            display: block;
                        }

                        .pd-name {
                            cursor: pointer;
                        }

                        .pd-name + img {
                            position: absolute;
                            display: none;
                            width: 300px;
                        }
                    </style>
                    <td>{{ product.price }}</td>

                    <td>{{ product.reserve }}</td>
                    <td>{{ product.create_time }}</td>
                    <td>{{ product.sales }}</td>
                    <td style="display: flex;justify-content: center;align-items: center;">
                        <a class="btn btn-primary" style="margin-right: 10px"
                           href="{{ url_for('admin.edit_product_ep', product_id = product.id) }}">修改</a>
                        {% if product.valid == 1 %}
                            <form method="post" action="{{ url_for('admin.invalid_product_ep') }}">
                                <input type="text" hidden value="{{ product.id }}" name="product_id">
                                <button type="submit" class="btn btn-danger">下架</button>
                            </form>
                        {% else %}
                            <form method="post" action="{{ url_for('admin.valid_product_ep') }}">
                                <input type="text" hidden value="{{ product.id }}" name="product_id">
                                <button type="submit" class="btn btn-success">上架</button>
                            </form>
                        {% endif %}
                    </td>
                </tr>

            {% endfor %}

        </table>
        {% include 'template/pagination.html' %}
    </div>
{% endblock %}
